<template>
  <div>
    <a-tree size="large" v-model:selectedKeys="selectedKeys" :field-names="fieldNames" :tree-data="props.treeData" show-icon default-expand-all :class="['depart-side-tree', {'is-local': isEnvLocal}]" :style="{width: openSide? '220px': 0}" @select="(selectedKeys, {selectedNodes}) => {emits('onSelect', selectedKeys, selectedNodes)}" :blockNode="true">
      <template #title="{ label, id, children, parentId}">
        <div class="tree-title">
          <span class="title-name">{{ label }}</span>
          <span class="right-operate" v-if="!isEnvLocal">
            <a-space>
              <edit-outlined v-if="hasPermission('system:dept:edit')" @click.stop="()=> {emits('onEdit', {name: label, id, parentId})}" />
              <delete-outlined @click.stop="()=> {emits('onDelete', id)}" v-if="hasPermission('system:dept:delete') && (!children || (children && !children.length))" />
            </a-space>
          </span>
        </div>
      </template>
    </a-tree>
  </div>

</template>
<script setup name="sideTree">
import { ref } from 'vue'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { hasPermission } from '@/utils'
const emits = defineEmits(['onSelect', 'onEdit', 'onDelete'])
const props = defineProps({
  defaultSelect: {
    type: Array,
    default: () => []
  },
  openSide: {
    type: Boolean,
    default: () => true
  },
  treeData: {
    type: Array,
    default: () => []
  }
})
let isEnvLocal = ref(process.env.VUE_APP_CONFIG == 'local')
const selectedKeys = ref(props.defaultSelect)
const fieldNames = { children: 'children', title: 'label', key: 'id' }
</script>
